@model Coevery.Entities.ViewModels.EditTypeViewModel
<header id="page-title">
    <h1 class="pull-left">@T("New Entity") <span>Create a new entity</span></h1>
</header>

<section id="main-content" style="margin-top: 47px">
    <div id="page-actions" class="clearfix">
        <btn-actions>
            <button type="button" class="btn btn-small" data-ng-click="exit()">Back</button>
            <button type="button" class="btn btn-small btn-primary" data-indi-click="saveAndView()">Save</button>
            <button class="btn btn-small btn-primary" data-indi-click="saveAndBack()">Save & Back</button>
        </btn-actions>
    </div>

    <div class="row-fluid">
        <div class="span12">
            <div class="form-horizontal">
                @using (Html.BeginFormAntiForgeryPost(Html.ViewContext.HttpContext.Request.Url.PathAndQuery, FormMethod.Post,
                                                              new { @class = "edit-mode", id = "myForm" }))
                {
                    @Html.ValidationSummary()
                    <fieldset>
                        <legend>General Information</legend>
                        <section class="data-row control-group">
                            <label class="control-label required" for="DisplayName">@T("Display Name")</label>
                            <div class="controls errortips">
                                @Html.TextBoxFor(m => m.DisplayName, new { @class = "span12 labelForName", autofocus = "autofocus",required="" })
                            </div>
                        </section>
                        <section class="data-row control-group">
                            <label class="control-label required" for="Name">@T("Name")</label>
                            <div class="controls errortips">
                                @Html.TextBoxFor(m => m.Name, new { @class = "span12 required safename", @id = "EntityName" })
                                <span class="help-block">@T("Technical name of the type.")</span>
                            </div>
                        </section>
                    </fieldset>
                    <fieldset>
                        <legend>Enter Record Name and Label</legend>
                        <section class="data-row control-group">   
                            <p class="help-block">
                                The Record Name appears in page layouts, key lists, related lists, lookups, and search results.
                                For example, the Record Name for Account is "Account Name" and for case it is "Case Number".
                                Note that the Record Name field is always called "Name" when referenced via the API.
                            </p>
                        </section>
                        <section class="data-row control-group">                          
                            <label class="control-label required" for="FieldLabel">@T("Record Name Label")</label>
                            <div class="controls errortips">
                                @Html.TextBoxFor(m => m.FieldLabel, new { @class = "span12 labelForFieldName", required="" })
                            </div>
                        </section>
                        <section class="data-row control-group">
                            <label class="control-label required" for="FieldName">@T("Record Name")</label>
                            <div class="controls errortips">
                                @Html.TextBoxFor(m => m.FieldName, new { @class = "span12 nameisnotid required safename", @id = "FieldName" })
                            </div>
                        </section>
                    </fieldset>
                }
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    $(function () {
        //Validation
        $.validator.addMethod("safename", function (value) {
            return (/^[A-Za-z]([0-9]|[-_]|[A-Za-z]){0,127}$/.test(value));
        }, "FieldName is not legal!");
        $.validator.classRuleSettings.safename = { safename: true };

        var validator = $("#myForm").validate({
            //ignore: "*:not('.toValidate *')",
            onkeyup: function (element) {
                if (element.type == "text") {
                    this.element(element);
                }
            },
            errorClass: "inputError"
        });

        //Auto get name
        var $name = $("#EntityName");
        var $displayName = $(".labelForName");
        var jsonUrl = "@Url.Action("EntityName", "SystemAdmin", new RouteValueDictionary { { "Area", "Coevery.Entities" } })";
        var version = 0;

        var nameAltered;
        $name.keyup(function () {
            if (!$name.val()) {
                nameAltered = false;
            } else {
                nameAltered = true;
            }
        });

        var compute = function () {
            // stop processing automatically if altered by the user
            if (nameAltered) {
                return;
            }

            $.post(jsonUrl, {
                displayName: $displayName.val(),
                version: ++version,
                __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()
            },
                function (data) {
                    if (version == data.version) {
                        $name.val(data.result);
                    }
                },
                "json"
            );
        };

        $displayName.keyup(function () {
            compute();
        });


        var $fieldName = $("#FieldName");
        var $displayFieldName = $(".labelForFieldName");
        var jsonUrlFieldName = '@Url.Action("FieldName", "SystemAdmin", new RouteValueDictionary { { "Area", "Coevery.Entities" } })';
        var versionFieldName = 0;

        var nameAlteredFieldName;
        $fieldName.keyup(function () {
            if (!$fieldName.val()) {
                nameAlteredFieldName = false;
            } else {
                nameAlteredFieldName = true;
            }
        });

        var computeFieldName = function () {
            // stop processing automatically if altered by the user
            if (nameAlteredFieldName) {
                return;
            }

            $.post(jsonUrlFieldName, {
                creatingEntity: true,
                entityName: $name.val(),
                displayName: $displayFieldName.val(),
                version: ++versionFieldName,
                __RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()
            },
                function (data) {
                    if (versionFieldName == data.version) {
                        $fieldName.val(data.result);
                    }
                },
                "json"
            );
        };

        $displayFieldName.keyup(function () {
            computeFieldName();
        });
    });
</script>
